import { getCurrentInstance, reactive, toRefs } from 'vue'

interface IState {
  viewId: string
  viewExposureList: { key: string; isLoad: boolean }[]
}

const useExposureView = () => {
  const state = reactive<IState>({
    viewId: 'item_',
    viewExposureList: [],
  })

  type IDirection = 'vertical' | 'horizontal'
  const instance = getCurrentInstance()

  const useList = (
    list: any[],
    callBack: (item: any) => void,
    key = 'id',
    type: IDirection = 'vertical',
    isLoad = false,
  ) => {
    const winHeight = uni.getSystemInfoSync().screenHeight
    const windowWidth = uni.getSystemInfoSync().windowWidth

    const query = uni.createSelectorQuery().in(instance)
    list?.forEach((itemRef, index) => {
      const value = list[index][key] || ''
      query.select(`.${state.viewId}${value}`).boundingClientRect()
    })
    query.exec((rects) => {
      rects.forEach((rect: any, index: number) => {
        if (type === 'vertical') {
          const size_2_3 = rect.bottom - rect.top
          const box_height = rect.height * 0.5
          const iosHeight = uni.getSystemInfoSync().platform === 'ios' ? 60 : 0
          // 纵向
          if (
            size_2_3 >= box_height &&
            rect.top >= 0 &&
            rect.bottom - box_height - iosHeight <= winHeight
          ) {
            if (list![index].isLoad) return
            // 检查元素是否在视口中
            if (rect.top < winHeight && rect.bottom >= box_height) {
              list![index].isLoad = isLoad
              callBack(list![index])
            }
          }
        } else {
          const size_2_3 = rect.right - rect.left
          const box_width = rect.width * 0.35
          // 横向
          if (size_2_3 >= box_width && rect.right >= 0 && rect.right - box_width <= windowWidth) {
            if (list[index].isLoad === true) return
            // 检查元素是否在视口中
            if (rect.left < windowWidth && rect.right >= box_width) {
              list![index].isLoad = isLoad
              callBack(list![index])
            }
          }
        }
      })
    })
  }

  const safeArea = uni.getStorageSync('safeArea') || 0
  const useView = async (key: string, callBack: () => void) => {
    // 获取状态栏高度
    const winHeight = uni.getSystemInfoSync().windowHeight
    const iosHeight = uni.getSystemInfoSync().platform === 'ios' ? 40 + safeArea : 0
    if (state.viewExposureList.some((item) => item.key === key && item.isLoad)) return

    // 滑动获取元素
    const query = uni.createSelectorQuery().in(instance)
    query.select(`.${key}`).boundingClientRect()
    query.exec((rects) => {
      if (rects.length === 0 || rects[0] === null) return
      // 元素滑动高度
      const size_2_3 = rects[0].bottom - rects[0].top
      // 占比元素多少 2/3
      const box_height = rects[0].height * 0.35
      // 增加一个简单的可见性检查
      const isVisible = rects[0].top < winHeight && rects[0].bottom > 0 // 确保元素在视口内
      // 判断是否是刘海屏

      if (
        isVisible &&
        size_2_3 >= box_height &&
        rects[0].top >= 0 &&
        rects[0].bottom - iosHeight - box_height <= winHeight
      ) {
        callBack()
        state.viewExposureList.push({
          key,
          isLoad: true,
        })
      }
    })
  }

  return {
    ...toRefs(state),
    useList,
    useView,
  }
}

export default useExposureView
